<% 
    let turbo_action_level_1 = r#"data-action="click->navigation-left-nav-docs#onNavigateManageLevel1" "#;
    let turbo_action_high_levels = r#"data-action="click->navigation-left-nav-docs#onNavigateManageHighLevels" "#; 
%>

<div class="nav flex-column cms-level-<%- level %>" role="tablist" aria-orientation="vertical" data-controller="cms-index-link" data-level="<%- level %>">
    <%
    let color = if active {
    "purple"
    } else {
    ""
    };

    if children.is_empty() {
    %>
    <% if level == 1 {%>
    <div class="d-flex flex-row gap-2 align-items-center">
        <div class="menu-item flex-grow-1" data-navigation-left-nav-docs-target="level1Container">
            <a data-turbo-is-visitable class='d-block p-2 <% if active {%><%- String::from("active") %><% } %>' href="<%- href %>" <%- turbo_action_level_1 %> data-navigation-left-nav-docs-target="level1Link">
                <span class="text-wrap"><%- title %></span>
            </a>
        </div>
    </div>
    <% } else {%>
    <a data-turbo-is-visitable class="nav-link ps-1 text-break <%- color %>" href="<%- href %>" <%- turbo_action_high_levels %> data-navigation-left-nav-docs-target="highLevels"><%- title %></a>
    <% } %>

    <% } else {
    let aria = if open {
    "true"
    } else {
    "false"
    };

    let show = if open {
    "show"
    } else {
    "false"
    };
    %>

    <% if level == 1 {%>
    <div class="menu-item flex-grow-1 d-flex flex-row align-items-center">
        <div class='w-100 d-flex flex-row gap-2 align-items-start <% if active || open {%><%- String::from("active") %><% } %> justify-content-between doc-left-nav-level1-link-container' data-navigation-left-nav-docs-target="level1Container">
            <a data-turbo-is-visitable class='d-block p-2' href="<%- href %>" <%- turbo_action_level_1 %> data-navigation-left-nav-docs-target="level1Link">
                <span class="text-wrap"><%- title %></span>
            </a>
            <div class="pt-2">
                <span class="material-symbols-outlined rotate-on-aria-expanded text-white" href="#doc-<%= id %><%- id_suffix %>" role="button" aria-expanded="<%- aria %>" aria-controls="doc-<%= id %><%- id_suffix %>" data-action="click->navigation-left-nav-docs#toggle">expand_more</span>
            </div>
        </div>
    </div>
    <% } else {%>
    <span class="ps-1 py-0 d-flex justify-content-between align-items-start text-break" >
        <a data-turbo-is-visitable class="nav-link px-0 text-break <%- color %>" href="<%- href %>" <%- turbo_action_high_levels %> data-navigation-left-nav-docs-target="highLevels">
            <span class="text-wrap"><%- title %></span>
        </a>
        <div class="pt-2">
            <span class="material-symbols-outlined rotate-on-aria-expanded"  href="#doc-<%= id %><%- id_suffix %>" role="button" aria-expanded="<%- aria %>" aria-controls="doc-<%= id %><%- id_suffix %>" data-action="click->navigation-left-nav-docs#toggle">expand_more</span>
        </div>
    </span>
    <% } %>

    <div class="collapse <%- show %>" id="doc-<%= id %><%- id_suffix %>">
        <div class='nav flex-column level-<%- level %>-list' role="tablist" aria-orentation="vertical">
            <% for child in children.into_iter() { %>
                <% let child = child.id_suffix(&id_suffix); %>
                <%- child.render_once().unwrap() %>
            <% } %>
        </div>
    </div>
    <% } %>
</div>
